<template>
  <BaseMainSlot :show-search-box="false">
    <!-- 摄像头管理 -->
    <template v-slot:btn-box>
      <ActionBar :page-no="113" :add-active="addActive" :del-active="delActive" @add="add" @del="del" />
    </template>
    <template v-slot:table-box>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">左边导航栏</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div class="tab-box">
          <el-table v-loading="loading" highlight-current-row :data="tableData" stripe border height="calc(100% - 50px)"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :selectable="(row) => { return !row.selectable }" />
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="camera.cameraName" label="摄像头名称" />
            <el-table-column prop="camera.deviceSerial" label="序列号" />
            <!--            <el-table-column prop="verificationCode" label="设备验证码" />-->
            <el-table-column label="操作" width="100">
              <template v-if="scope.row.cameraFacilityMapperId" slot-scope="scope">
                <el-button v-if="judgePermission(113, 'delete')" class="text-btn-cursor cursor-delete" type="text"
                  size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
            @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <el-dialog title="添加相机" :visible.sync="addcameraVisible" width="400px" :close-on-click-modal="false">
        <span slot="title">{{ facilityName }}</span>
        <p class="dialog-body">
          <span>选择摄像头：</span>
          <el-select filterable clearable v-model="nowcameraindex" placeholder="选择摄像头" value-key="cameraNo" multiple filterable
            @change="cameraChange">
            <el-option v-for="(item, index) in cameralist" :key="index" :label="item.cameraName" :value="item.cameraNo" />
          </el-select>
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="closevisab">取 消</el-button>
          <el-button class="savebtn" type="primary" @click="addclickmet">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar";
import treeSide from "@/components/selectbutton/trelist.vue";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/area";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";
// import { getToken } from '@/utils/auth';
export default {
  name: "CameraManagement",
  components: { ActionBar, treeSide, Pagination, BaseMainSlot },
  mixins: [mymixin],
  data () {
    return {
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      cameraNoList: [],
      addcameraVisible: false,
      paramslist: {},
      cameralist: [],
      cameraName: "",
      loading: false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    nowChanceStau (newval) {
      if (newval === "add") {
        this.addcameraVisible = true;
      }
    }
  },
  mounted () {
    this.addActive = false;
    this.getcameralist();
  },
  methods: {
    // 对话框关闭相关方法
    farmhandleClose (done) {
      console.log(done);
      this.$confirm("取消添加鱼塘？")
        .then(_ => {
          done();
          this.closevisab();
        })
        .catch(_ => { });
    },
    cameraChange (val) {
      // this.cameraName = this.cameralist[val].cameraName
      this.cameraNoList = val;
    },
    closevisab () {
      // this.paramslist = {}
      this.nowcameraindex = "";
      this.nowChanceStau = "";
      this.addcameraVisible = false;
    },
    // 查询所有摄像头列表
    getcameralist () {
      nowpagereq.getcameralist({ organizationNo: sessionStorage.organizationNo }).then(res => {
        console.log(res);
        this.cameralist = res.data;
      });
    },
    // 点击树状触发方法
    treeselectvalue (e) {
      let dd = e.organizationNo;
      this.paramslist = {};
      if (!dd) {
        this.addActive = false;
        this.$message.warning("请勿选择此地块组");
        return;
      }
      // console.log(e)
      this.facilityName = e.facilityName;
      this.paramslist["organizationNo"] = e.organizationNo;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
      }
      this.getTableDataList();
    },
    // 获取表格数据
    getTableDataList () {
      let newpar = { ...this.paramslist };
      if (newpar.organizationNo) {
        delete newpar.organizationNo;
      }
      let param = {
        page: this.currentPage,
        size: this.pageSize,
        entity: newpar
      };

      nowpagereq.getlist(param).then(res => {
        this.loading = true;
        let data = res.data.content;
        this.totalSize = res.data.totalElements;
        this.tableData = data;
        this.loading = false;
        this.addblankmet();
        this.resetActionBar();
      });
    },
    // 点击确定---------现在暂无数据
    addclickmet () {
      this.nowChanceStau = "";
      // console.log(this.paramslist)
      // let camerames = { ...this.cameralist[this.nowcameraindex] }
      // this.$set(camerames, 'cameraName', this.cameraName)
      if (this.cameraNoList.length === 0 || !this.cameraNoList) {
        return this.$messag.warning("请先选择摄像头");
      }
      nowpagereq
        .addslist({ cameraNoList: this.cameraNoList, ...this.paramslist })
        .then(res => {
          if (res.success === false) {
            this.$message.error("添加失败！请检查数据是否完整");
          } else if (res.success) {
            this.$message.success("添加成功");
          }
          this.getTableDataList();
          this.nowcameraindex = "";
          this.addcameraVisible = false;
          this.resetActionBar();
        });
    },
    // 点击表格
    handleSelectionChange (e) {
      let list = e;
      let isblank = false;
      this.tableselectidlist = list.map(item => {
        if (item.cameraFacilityMapperId) {
          return item.cameraFacilityMapperId;
        } else {
          isblank = true;
        }
      });
      if (isblank) {
        this.tableselectidlist = [];
        this.$message.warning("请不要选择空白行");
        return;
      }
      if (this.tableselectidlist.length > 0) {
        this.delActive = true;
      }
    },
    changePageSize (pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    delmessage () {
      nowpagereq.delListById(this.tableselectidlist).then(res => {
        if (res.success === false) {
          this.$message.error("删除失败");
        } else if (res.success) {
          this.$message.error("删除成功");
        }
        this.getTableDataList();
      });
    },
    handleDelete (data) {
      // nowpagereq.dellist([data.cameraFacilityMapperId]).then(
      //   res => {
      //     if (res.success === false) {
      //       this.$message.error("删除失败")
      //     } else if (res.success) {
      //       this.$message.error("删除成功")
      //     }
      //     this.getTableDataList()
      //   }
      // )
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          nowpagereq.dellist([data.cameraFacilityMapperId]).then(res => {
            if (res.success === false) {
              this.$message.error("删除失败");
            } else if (res.success) {
              this.$message.error("删除成功");
            }
            this.getTableDataList();
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    save () {
      // if(nowChanceStau===''){

      // }
      console.log(this.setnowChanceStau);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  // width: 200px;
  color: #fff !important;
}

::v-deep .el-dialog__wrapper {
  .el-dialog {
    width: 25vw !important;
  }
}

.main {
  width: 100%;
  height: 100%;
}

.farm-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  .tr-sid {
    width: 240px;
    margin: 0 10px;
    height: calc(100% - 50px);
    padding: 10px;
    background-color: #fff;

    .sid-head {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }

    .sid-tree {
      width: 100%;
      height: calc(100% - 21px);
    }
  }

  .tab-box {
    width: calc(80% - 10px);
    margin-right: 10px;
    height: 100%;
  }
}

.dialog-body {
  width: 100%;
  display: flex;
  align-items: center;

  span {
    min-width: 140px;
  }

  ::v-deep .el-select {
    width: 100%;
  }
}
</style>
